<template>
	<view class="module">
		<view class="content">
			<image class="logo" src="../../static/login/logo.png"></image>
			<view class="text-area">
				<text class="title">{{title}}</text>
			</view>
			<view class="input">
				<u-form labelPosition="left" :model="info" ref="uForm" :rules="rules">
					<u-form-item prop="userInfo.phone" borderBottom ref="item1">
						<u-input placeholder="请输入手机号" maxlength="11" v-model.trim="info.phone" border="none"
							type="number" >
							<template slot="prefix">
								<view style="width: 80rpx;">
									<u-icon name="account" color="#8f8f94" size="20"></u-icon>
								</view>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="userInfo.password" borderBottom ref="item1">
						<u-input placeholder="请输入密码" maxlength="12" v-model="info.password" border="none"
							type="password">
							<template slot="prefix">
								<view style="width: 80rpx;">
									<u-icon name="lock" color="#8f8f94" size="20"></u-icon>
								</view>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="userInfo.code" borderBottom ref="item1">
						<u-input placeholder="请输入验证码" maxlength="6" v-model="info.code" border="none" type="number">
							<template slot="prefix">
								<view style="width: 80rpx;">
									<u-icon name="email" color="#8f8f94" size="20"></u-icon>
								</view>
							</template>
							<!-- <template slot="suffix" style="width:200rpx">
								<u-button @click="getCodeMethod" size="mini" type="primary"
									:disabled="codeIsDisabled">{{tips}}</u-button>
								<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
									@change="codeChange"></u-code>
							</template> -->
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="x秒重新获"></u-code>
								<u-button @tap="getCodeMethod" :text="tips" type="primary" size="mini"></u-button>
							</template>
						</u-input>
					</u-form-item>
				</u-form>
			</view>
			<view class="button_box">
				<view class="flexBetween">
					<view class="center_text">
						已有账号<view class="text" @click="login">去登录</view>
					</view>
				</view>
				<MButton name="注册" @click="enrollSucceed" colorType="topic"></MButton>
				<view class="submit_code">
					<view class="center">
						<u-checkbox-group v-model="isChecked"  @change="checked">
							<u-checkbox shape="circle" ></u-checkbox>
						</u-checkbox-group>
						<view class="soft_agreement">我已阅读并同意
							<text @click="toUserAgreement" style="color:rgb(31, 137, 236)">《用户协议》</text>
							和<text @click="toPrivacyPolicy" style="color:rgb(31, 137, 236)">《隐私政策》</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<u-toast ref="uToast" ></u-toast>
	</view>
</template>

<script>
	import {
		getCode,
		enroll
	} from '@/api/login/index.js'
	import isValidPhoneNumber from "@/utils/vaildatetell.js"
	export default {
		data() {
			return {
				codeIsDisabled: false,
				isChecked: false,
				tips: '',
				seconds: 60,
				title: ' ',
				bgColor: '',
				color: '#c4ccd4',
				index: 0,
				rules: {
					'userInfo.account': {
						type: 'string',
						required: true,
						max: 11,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'userInfo.password': {
						type: 'string',
						max: 11,
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					'userInfo.captcha':{
						type: 'string',
						max: 6,
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
				},
 
				info: {
					phone: '',
					password: '',
					code: ''
				},
				verificationCode: '',
				rules: {
					// 'userInfo.phone': {
					// 	type: 'number',
					// 	len: 11,
					// 	required: true,
					// 	message: '请输入正确的手机号',
					// 	trigger: "change"
					// },
					// 'userInfo.password': {
					// 	type: 'string',
					// 	min: 6,
					// 	max: 12,
					// 	required: true,
					// 	message: '密码不得小于6位大于12位哦~',
					// 	trigger: ['blur', 'change']
					// },
					// 'userInfo.code': {
					// 	type: 'string',
					// 	len: 6,
					// 	required: true,
					// 	message: '请输入6位验证码',
					// 	trigger: ['blur', 'change']
					// },
				}
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
		 checked() {
		 	this.isChecked = !this.isChecked
		 },
			async enrollSucceed() {
					const res = await enroll({
						password: this.info.password,
						phone: this.info.phone,
						userType: 0,
						nickName: '',
						gender: 0,
						avatar:''
					})
					if(res.data.code != 200) return this.$refs.uToast.show({
					message: res.data.msg,
					type: 'error'
				}) 
				setTimeout(() => {
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'success'
					}) 
				}, 1000)
			},
 
			changeValue(e) {
	
				if (e.length == 11) {
					// this.bgColor = 'primary'
					this.bgColor = '#1f89ec'
					this.color = '#fff'
				} else {
					this.bgColor = '#c4ccd4'
				}
			},
			login() {
				uni.navigateTo({
					url: './login',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
		 
			async enrollSucceed() {
				if (this.info.phone.length <= 0) {
					this.$refs.uToast.show({
						 message:'请输入手机号',
						 type:'error'
					})
					return
				}
				const phone = /^1[3-9]\d{9}$/;
				if (!phone.test(this.info.phone)) {
					this.info.phone = ""
					this.$refs.uToast.show({
						 message: '请输入正确的手机号',
						 type:'error'
					})
					return
				}
				if (this.info.password.length < 6) {
					this.$refs.uToast.show({
						 message: '请输入最少六位数密码',
						 type:'error'
					})
					return
				}
				if (this.info.code.length == 0) {
					this.$refs.uToast.show({
						 message: '请输入验证码',
						 type:'error'
					})
					return
				}
				
				if (!this.isChecked) return this.$refs.uToast.show({
					message: "请先阅读和同意协议",
					type: 'error'
				})
				
				const res = await enroll({
					userType: 0, //用户类型
					password: this.info.password,
					phone: this.info.phone,
					verificationCode: this.info.code
				})
				if (res.data.code == 200) {
					uni.navigateTo({
						url: './login',
						animationType: this.animation.type,
						animationDuration: this.animation.time,
						success() {
							this.$refs.uToast.show({
								 message:"注册成功",
								 type:'success'
							})
						}
					})
				} else{
					this.$refs.uToast.show({
						 message: res.data.msg,
						 type:'error'
					})
				}
 
},
			codeChange(text) {
				this.tips = text;
			},

			async getCodeMethod() {

				if (!isValidPhoneNumber(this.info.phone)) return this.$refs.uToast.show({
					message: '请输入正确的手机号',
					type: 'error'
				})
				if (this.$refs.uCode.canGetCode) {
					 
					const res = await getCode(this.info.phone);
					if (res.data.code != 200) return this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error',
					})
					this.$refs.uToast.show({
						message: '验证码发送成功',
						type: 'success'
					})
					this.$refs.uCode.start();
				}
			},
			end() {
				this.codeIsDisabled = false
				uni.$u.toast('倒计时结束');
			},
			start() {
				this.codeIsDisabled = true
				uni.$u.toast('倒计时开始');
			},
			toUserAgreement() {
				uni.navigateTo({
					url: '/pages/my/userAgreement',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			toPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages/my/privacy',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/global.scss";
	@import "~@/styles/index.scss";

	.module {
		padding: 0rpx 80rpx;
		box-sizing: border-box;

		.content {
			flex-direction: column;
			@include flexCenter
		}

		.logo {
			height: 200rpx;
			width: 200rpx;
			margin-top: 60rpx;
			margin-left: auto;
			margin-right: auto;
		}

		.text-area {
			text-align: center;
			margin-top: 30rpx;
		}

		.title {
			font-size: 36rpx;
			color: #8f8f94;
		}

		.input {
			margin-top: 80rpx;
			font-size: 28rpx;
			width: 100% !important;
		}

		.button_box {
			text-align: center;
			color: #8f8f94;
			font-size: 28rpx;

			.flexBetween {
				@include flexBetween;
				line-height: 120rpx;
			}

			.submit_code {
				margin-top: 120rpx;

				.center {
					display: flex;
					align-items: center;
				}
			}

			.center_text {
				display: flex;
				align-items: center;

				.text {
					color: $theme;
				}
			}
		}
		.submit_code {
			margin-top: 120rpx;
		
			.center {
				display: flex;
				align-items: center;
			}
		}
	}
</style>